import { computed, defineComponent, reactive, ref } from "vue";
import style from "./index.module.less";
import PageTitle from "@/components/PageTitle";
import BannerUploader from "@/components/BannerUploader";
import CardView from "@/components/CardView";
import Form from "@/components/Form";
import { FormGroupPropsData } from "@/components/FormGroup/types";
import FormGroup from "@/components/FormGroup";
import ButtonView from "@/components/ButtonView";
import { IFormItem, IFormRef } from "@/components/Form/types";
import { useRequest } from "./request";
export default defineComponent({
  name: "",
  setup() {
    const formRef = ref<IFormRef>();
    const { confirm, myBrandInfo, packType, productLevel } = useRequest();
    const render1 = () => {
      return (
        <BannerUploader
          v-model={myBrandInfo.value.logoUrl}
          class=" !h-[178px] ml-[-10px] mr-[-10px] mt-[-10px]"
        />
      );
    };
    const render2 = () => {
      const data = computed<FormGroupPropsData[]>(() => [
        {
          title: "基本信息",
          data: [
            {
              label: "品牌名称",
              key: "name",
              type: "input",
              rules: [
                {
                  required: true,
                },
              ],
            },

            {
              label: "主营农产",
              type: "select",
              key: "major",
              rules: [
                {
                  required: true,
                },
              ],
              typeData: productLevel.value,
            },
            {
              label: "包装方式",
              type: "select",
              key: "packType",
              rules: [
                {
                  required: true,
                },
              ],
              typeData: packType.value,
            },
            {
              label: "联系方式",
              key: "phone",
              type: "input",
              rules: [
                {
                  required: true,
                },
              ],
            },
            {
              label: "联系地址",
              key: "address",
              type: "input",
              rules: [
                {
                  required: true,
                },
              ],
            },
          ],
        },
        {
          data: [
            {
              label: "品牌介绍",
              key: "introduce",
              type: "textarea",
            },
          ],
        },
      ]);
      return (
        <div>
          <FormGroup
            data={data.value}
            v-model={myBrandInfo.value}
            ref={formRef}
          />
          <ButtonView
            type="primary"
            block
            class="!h-[40px] !mt-[19px]"
            onClick={() => {
              formRef.value?.submit(({ result, error, submitState }) => {
                submitState && confirm(myBrandInfo.value);
              });
            }}
          >
            确定
          </ButtonView>
        </div>
      );
    };
    return () => {
      return (
        <PageTitle title="我的品牌" childClass="p-[10px]">
          {render1()}
          {render2()}
        </PageTitle>
      );
    };
  },
});
